<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :flex="true"
      :auto-show-back-to-top="true"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="{
        width: '12rem'
      }"
    >
      <view slot="top">
        <u-navbar height="50" title="我的红包" title-size="36" title-color="#333" :is-back="true">
          <!-- #ifndef MP -->
          <view
            slot="right"
            class="dis-flex flex-x-center flex-y-center"
            style="padding: 0 20rpx"
            @click="$utils.route('/other/my-coupon/my-red-packet-used')"
          >
            <u-icon name="/static/ddlb.png" size="30"></u-icon>
          </view>
          <!-- #endif -->
          <!-- #ifdef MP -->
          <view
            class="dis-flex flex-x-center flex-y-center"
            style="padding: 0 10rpx"
            @click="$utils.route('/other/my-coupon/my-red-packet-used')"
          >
            <text style="font-size: 30rpx">使用记录</text>
          </view>
          <!-- #endif -->
        </u-navbar>
        <view
          v-if="userCount && userCount.shopRedPacketAmount"
          class="dis-flex flex-y-between flex-y-center"
          :style="{
            height: '180rpx',
            margin: '20rpx',
            borderRadius: '20rpx',
            padding: '20rpx 50rpx',
            color: '#fff',
            backgroundImage: `url(${getImageUrl('points-bg.png')})`
          }"
        >
          <view class="dis-flex flex-column flex-x-center flex-y-center">
            <text style="font-size: 40rpx"
              >{{ userCount.shopRedPacketAmount.totalAmount * 0.01 }}
            </text>
            <text>累计</text>
          </view>
          <view class="dis-flex flex-column flex-x-center flex-y-center">
            <text style="font-size: 40rpx"
              >{{ userCount.shopRedPacketAmount.unusedAmount * 0.01 }}
            </text>
            <text>未使用</text>
          </view>
          <view
            class="dis-flex flex-column flex-x-center flex-y-center"
            @click="$utils.route('/other/my-coupon/my-red-packet-used')"
          >
            <text style="font-size: 40rpx; cursor: pointer; color: #6400ff"
              >{{ userCount.shopRedPacketAmount.usedAmount * 0.01 }}
            </text>
            <text>已使用</text>
          </view>
          <view class="dis-flex flex-column flex-x-center flex-y-center">
            <text style="font-size: 40rpx"
              >{{ userCount.shopRedPacketAmount.uneffectedAmount * 0.01 }}
            </text>
            <text>未生效</text>
          </view>
          <view class="dis-flex flex-column flex-x-center flex-y-center">
            <text style="font-size: 40rpx"
              >{{ userCount.shopRedPacketAmount.expiredAmount * 0.01 }}
            </text>
            <text>已失效</text>
          </view>
        </view>
      </view>
      <view class="mer-coupon" v-for="(group, index) in itemList" :key="index">
        <view class="mer-info">
          <u-avatar :src="group.shop.logo" size="60"></u-avatar>
          <text class="mer-name">{{ group.shop.name }}</text>
        </view>
        <view style="margin-top: 20rpx">
          <u-line></u-line>
        </view>
        <view class="couponListView" v-for="(item, index1) in group.items" :key="index1">
          <view class="couponView">
            <view class="moneyView">
              <view class="couponMoney">
                <text>¥{{ (item.amount * 0.01).toFixed(0) }}</text>
              </view>
            </view>
            <view class="couponInfoView">
              <view class="couponTitle">{{ item.remark }}</view>
              <view class="infoView">
                <view class="couponTime">发放日期：{{ formatTime(item.grantedTime) }}</view>
                <view class="couponTime">生效日期：{{ formatTime(item.effectTime) }}</view>
                <view class="couponTime">失效日期：{{ formatTime(item.expiredTime) }}</view>
              </view>
              <view v-if="isUneffected(item.effectTime)" class="couponBtn uneffected">未生效</view>
              <view v-if="isExpired(item.expiredTime)" class="couponBtn disabled">已失效</view>
            </view>
          </view>
          <view style="margin: 20rpx 0">
            <u-line></u-line>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userCount: null,
      itemList: []
    }
  },
  computed: {
    formatTime: function () {
      return (e) => this.$utils.parseTime(e)
    }
  },
  onShow() {
    this.getUserCount()
    this.queryList(1)
  },
  methods: {
    isUneffected(timeline) {
      return new Date(timeline) > new Date()
    },
    isExpired(timeline) {
      return new Date(timeline) <= new Date()
    },
    onCouponGain(group) {
      this.$u.route('dine/pay-view/pay-view?shopId=' + group.shop.id + '&from=redpacket')
    },
    getUserCount() {
      this.$u.get('/app-api/member/statistics/center-count').then((res) => {
        this.userCount = res.data
      })
    },
    queryList(page = 1, size = 10) {
      this.$u
        .get('/app-api/promotion/redpacket/record/page-group', {
          pageNo: page,
          pageSize: size,
          status: ''
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    }
  }
}
</script>

<style lang="scss">
@import url('my-coupon.css');

.mer-coupon {
  margin: 0 20rpx 15rpx;
  border-radius: 20rpx;
}

.couponListView {
  background: #fff;
  position: relative;

  .couponView {
    display: flex;
    height: 161rpx;
    margin-top: 19rpx;

    .moneyView {
      position: relative;
      background-color: #ff6666;
      width: 160rpx;
      color: #ffffff;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;

      .couponMoney {
        font-size: 36rpx;
        margin-bottom: 10rpx;

        text {
          font-size: 56rpx;
          font-weight: 600;
        }
      }
    }

    .moneyView {
      width: 160rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: linear-gradient(135deg, #ffe066, #ff6b6b);
      border-radius: 12rpx;
      box-shadow: 0 6rpx 12rpx rgba(255, 107, 107, 0.3);
    }

    .couponInfoView {
      flex: 1;
      padding: 20rpx;
      position: relative;
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      .infoView {
        display: flex;
        flex-flow: column;

        .couponTitle {
          font-size: 30rpx;
          color: #333333;
        }

        .couponTime {
          font-size: 20rpx;
          color: #999999;
        }
      }

      .couponBtn {
        width: 150rpx;
        height: 50rpx;
        background: #10a28f;
        border-radius: 25rpx;
        font-size: 26rpx;
        color: #ffffff;
        line-height: 48rpx;
        text-align: center;
        padding: 0 15rpx;
        position: absolute;
        bottom: 15rpx;
        right: 20rpx;
      }

      .disabled {
        background: #cccccc;
      }

      .uneffected {
        background: greenyellow;
      }
    }
  }
}
</style>
